<template>
  <view>
    <u-tabs
      :list="list"
      :activeStyle="activeStyle"
      :inactiveStyle="inactiveStyle"
      lineColor="#24DE73"
      :lineWidth="lineWidth"
      :lineHeight="lineHeight"
      :lineBottom="lineBottom"
      :duration="duration"
      :scrollable="scrollable"
      :current="current"
      :keyName="keyName"
      @click="handleClick"
      @change="handleChange"
    />
    <u-line v-if="border" color="#D9D9D999" />
  </view>
</template>

<script>
export default {
  props: {
    // 选项卡列表
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 选中样式
    activeStyle: {
      type: Object,
      default: () => {
        return {
          color: "#24DE73",
          fontFamily: "FZZongYi-M05S",
        };
      },
    },
    // 未选中样式
    inactiveStyle: {
      type: Object,
      default: () => {
        return {
          color: "#fff",
          fontFamily: "FZZongYi-M05S",
        };
      },
    },
    // 下划线宽度
    lineWidth: {
      type: [String, Number],
      default: 56,
    },
    // 下划线高度
    lineHeight: {
      type: [String, Number],
      default: 3,
    },
    // 下划线距离
    lineBottom: {
      type: [String, Number],
      default: 6,
    },
    // 下边框线
    border: {
      type: Boolean,
      default: false,
    },
    // 滑块移动时间，单位ms
    duration: {
      type: Number,
      default: 300,
    },
    // 菜单是否可滚动
    scrollable: {
      type: Boolean,
      default: true,
    },
    // 当前选中索引
    current: {
      type: Number,
      default: 0,
    },
    // 读取的键名
    keyName: {
      type: String,
      default: "name",
    },
  },
  methods: {
    handleClick(val) {
      this.$emit("click", val);
    },
    handleChange(val) {
      this.$emit("change", val);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
